<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>REDJS-template-debug</title>
    <link rel="icon" href="../LOGO.ico">
    <script type="text/javascript" src="../Rsd.js"></script>
  </head>
  <body >
    <h1>this is user list:</h1>
  <div id="user_list"></div>

    <script type="text/html" id="tpl_user_list">
      <% for ( let i = 0; i < users.length; i++ ){ %>
        <li style="line-height: 40px;">
          <a href="<%=users[i].url%>">
            <%=users[i].name%>
          </a>
            is
            <%=users[i].age%>
            years old.
            <% if (users[i].age < 20 ) {%>
              <span style="color:red;">less than 20</span>
            <%} else {%>
              <span style="color:blue; font-weight: bold;"> is adult </span>
            <%}%>  
            from <%=users[i].country%>
          
        </li>
      <% } %>
      </ol>
      <b>above total: <%= users.length %></b>
    </script>

    <script>


      //data 
      var userListData = [];
      for(var i =0 ;i<100;i++)
      {
        userListData.push({ name: 'nat', age: 18, url: 'http://localhost:3000/nat',country:'us' });
        userListData.push({ name: 'jack', age: 22, url: 'http://localhost:3000/jack' ,country:'jp'});
        userListData.push({ name: 'hacker', age: 22, url: 'http://localhost:3000/hacker' ,country:'uk'});
      }
       
        setTimeout(() => {

          var s = Date.now();  
          var tpl = document.getElementById('tpl_user_list');
          var tpl_str = tpl.innerHTML;
           //console.log(tpl_str);
          var userListViewRender = Rsd.compile(tpl_str,'userlist',1);
          console.log(userListViewRender);
          tpl.parentNode.removeChild(tpl);
          var html = userListViewRender.fn({users: userListData }) ;
          var div = document.getElementById('user_list');
          div.innerHTML = html;

          console.log(userListData.length,'条，渲染用时：',Date.now()-s,'ms');

        
        }, 100);
       
</script>
  </body>
</html>